<template>
  <a-breadcrumb>
    <a-breadcrumb-item v-for="item in breadcrumbList" :key="item.name" :class="item.canClick ? 'canClick' : ''" @click="goPage(item)">
      <MenuIcons v-if="item.icon" :type="item.icon" />
      <span>{{ item.title }}</span>
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import MenuIcons from '@/layouts/Menu/menuIcons'
  import { useSystemStore } from '@/store/system'
  import { storeToRefs } from 'pinia'
  const route = useRoute()
  const { indexPageObj } = storeToRefs(useSystemStore())

  const breadcrumbList = computed(() => {
    let list: any[] = []
    route.matched.forEach((item, index) => {
      if (item.meta && !item.meta.hideInBread && item.meta.title) {
        const { components, meta } = item
        const { title, name, icon } = meta
        const obj = {
          title,
          name: name,
          canClick: !!components && index + 1 !== route.matched.length,
          icon
        }

        list.push(obj)
      }
    })

    if (route.name !== 'home' && indexPageObj.value?.name === 'home') {
      const homeMeta = indexPageObj.value.meta || {}
      const homeObj = { ...homeMeta, name: 'home', canClick: true }
      list.unshift(homeObj)
    }

    return list
  })

  const router = useRouter()
  const goPage = (targetItem: any) => {
    if (!targetItem.canClick) return
    router.push({
      name: targetItem.name
    })
  }
</script>

<style lang="less" scoped>
  .canClick {
    &:hover {
      color: #1677ff;
      cursor: pointer;
    }
  }
</style>
